<template>
  <div class="comp-page-search-result"
    layout layout-align="start center"
    v-if="list && list.length > 0">
    <p class="comp-page-search-result__text">
      <i class="iconfont icon-biaoqian"></i>检索项:
    </p>

    <!-- 搜索内容标签
    -------------------------- -->
    <div class="comp-page-search-result__tags">
      <el-tag
        class="comp-page-search-result__tag"
        v-for="result in list"
        :key="result.name"
        size="small"
        closable
        @close="clear(result)"
        :type="focusName === result.name ? 'warning' : 'info'">
        {{ `${result.name}: ${result.label || result.value}` }}
      </el-tag>
    </div>

    <!-- 清除按钮
    -------------------------- -->
    <p class="comp-page-search-result__clear"
      @click="clearAll()">清除</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'CompPage-searchSearchResult',
  data () {
    return {
      list: []
    }
  },
  props: {
    addList: Array, // 添加的搜索选项列表
    module: String, // 当前页面的组件名
    focusName: String // 当前聚焦的控件名称
  },
  watch: {
    addList: {
      immediate: true,
      deep: true,
      handler (v) {
        if (v && v.length) {
          this.add(v)
        }
      }
    }
  },
  computed: {
    ...mapState([ 'pageSearchHistory' ])
  },
  methods: {
    // 添加搜索项
    add (addList) {
      addList.forEach(item => {
        const existItem = this.list.find(i => i.name === item.name)
        // 新增的值是否在list中已存在
        if (existItem) {
          this.list[this.list.indexOf(existItem)].label = item.label || ''
          this.list[this.list.indexOf(existItem)].value = item.value
        } else if (item.value && item.value.length) {
          // existItem不存在时，如果添加项的值为空时，则忽略，存在则添加
          this.list.push({ ...item })
        }
      })
      this.emitChange()
    },
    // 清除单个搜索项
    clear (item) {
      this.list = this.list.filter(i => i.name !== item.name)
      this.emitChange()
    },
    // 清除按钮
    clearAll () {
      this.list = []
      this.emitChange()
    },
    // 向父组件传递 搜索内容改变事件
    emitChange () {
      this.$emit('searchCondChange', this.list)
    }
  },

  created () {
    // 从store中获取历史记录
    const history = this.pageSearchHistory.find(i => i.module === this.module)
    if (history) {
      this.list = history.data
      this.emitChange()
    }
  },
  beforeDestroy () {
    // 将搜索历史保存在store中
    const resultList = this.list || []
    const param = { module: this.module, data: resultList }
    this.$store.commit('setPageSearchHistory', param)
  }
}
</script>

<style lang="scss">
@import "src/styles/config/components.scss";

@include b(page-search-result) {
  height: $--page-search-result-height;
  margin-top: $--margin-base * 1.5;
  @include layout(('md', 'sm', 'xs')) { margin-bottom: $--margin-base; }

  @include e(text) {
    color: $--color-text-regular;
    margin-right: $--margin-base;
    & > i { margin-right: $--margin-base * .5; }
  }

  @include e(tag) {
    color: $--color-text-primary;
    margin-right: $--margin-base;
  }

  @include e(clear) {
    color: $--color-text-regular;
    cursor: pointer;

    &:hover {
      color: $--color-text-primary;
    }
  }

}
</style>
